<template>
  <div>
    <detail-banner :sightName="sightName" :bannerImg="bannerImg" :bannerImgs="bannerImgs"></detail-banner>
    <detail-header></detail-header>
    <detail-list :list="list" ></detail-list>
    <div class="dd"></div>
  </div>
</template>
<script>
import detailBanner from "./components/banner";
import detailHeader from "./components/Header";
import detailList from "./components/List";
import axios from "axios";

export default {
  name: "detail",
  data() {
    return {
      list: [],
      bannerImg: "",
      sightName: "",
      bannerImg: "",
      bannerImgs: []
    };
  },
  mounted() {
    this.getDetailInfo();
  },
  methods: {
    getDetailInfo() {
      axios
        .get("/api/detail.json", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(this.handleGetDataSucc);
    },
    handleGetDataSucc(res) {
      let data = res.data;
      // console.log(data);
      if (data.ret && data.data) {
        let ms = data.data;
        this.list = ms.categoryList;
        this.bannerImg = ms.bannerImg;
        this.sightName = ms.sightName;
        this.bannerImgs = ms.gallaryImgs;
      }
    }
  },
  components: {
    detailBanner,
    detailHeader,
    detailList
  }
};
</script>
<style>
.dd {
  height: 50rem;
}
</style>
